<template>
  <div class="news-detail" ref="detailDom">
    <!-- 普通新闻 -->
    <div class="normalPost" v-if="postData.type == 1">
      <div class="header">
        <div class="icons">
          <span class="iconfont iconjiantou2" @click="$router.go(-1)"></span>
          <span class="iconfont iconnew"></span>
        </div>
        <div
          class="btnFollow"
          :class="{ unfollow: !postData.has_follow }"
          @click="handleClickFollow"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>

      <div class="title">{{ postData.title }}</div>
      <div class="info">
        {{ postData.user.nickname }} <span class="create-time">2020-08-19</span>
      </div>

      <div class="content" v-html="postData.content"></div>
    </div>

    <!-- 视频新闻 -->
    <div class="videoPost" v-if="postData.type == 2">
      <video
        src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
        controls
        poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
      ></video>
      <div class="info">
        <img
          :src="$axios.defaults.baseURL + postData.user.head_img"
          alt=""
          class="avatar"
        />
        <div class="name">{{ postData.user.nickname }}</div>
        <div
          class="btnFollow"
          :class="{ unfollow: !postData.has_follow }"
          @click="handleClickFollow"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ postData.title }}</div>
    </div>

    <div class="btns">
      <div
        class="btn dianzan"
        :class="{ haslike: this.postData.has_like }"
        @click="handleClickLike"
      >
        <span class="iconfont icondianzan"></span>
        {{ this.postData.like_length + 152 }}
      </div>
      <div class="btn weixin">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>

    <!-- 评论 -->
    <div class="comment-list">
      <h2>精彩跟帖</h2>
      <comment
        v-for="comment of commentList"
        :key="comment.id"
        :commentData="comment"
      />
    </div>
    <div class="comment-btn" v-if="showMoreBtn" @click="getComments">
      <van-button
        :loading="loading"
        loading-text="加载中"
        class="more-comment"
        color="#d81e06"
        type="info"
        plain
        round
      >
        更多跟帖
      </van-button>
    </div>
    <div class="noMore" v-else>没有更多了</div>
    <comment-input @isActive="setPadding" @sendComment="reloadComment" />
  </div>
</template>

<script>
import Comment from "../components/Comment/main";
import CommentInput from "../components/Comment/CommentInput";
export default {
  name: "Detail",
  components: {
    Comment,
    CommentInput,
  },
  data() {
    return {
      postData: {},
      commentList: [],
      loading: false,
      showMoreBtn: true,
    };
  },
  mounted() {
    this.getPostData();
    this.getComments();
  },
  methods: {
    reloadComment() {
      this.commentList = [];
      this.getComments();
    },
    getComments() {
      this.loading = true;
      this.$axios.get("/post_comment/" + this.$route.query.id).then((res) => {
        const data = res.data.data;
        const dataLength = data.length;
        this.commentList = this.commentList.concat(
          data.splice(this.commentList.length, 5)
        );
        this.loading = false;
        if (this.commentList.length === dataLength) {
          this.showMoreBtn = false;
        }
      });
    },
    getPostData() {
      this.$axios.get("/post/" + this.$route.query.id).then((res) => {
        this.postData = res.data.data;
        // console.log(this.postData);
      });
    },
    handleClickFollow() {
      if (this.postData.has_follow) {
        this.$axios
          .get("/user_unfollow/" + this.postData.user.id)
          .then((res) => {
            this.postData.has_follow = false;
          });
      } else {
        this.$axios
          .get("/user_follows/" + this.postData.user.id)
          .then((res) => {
            this.postData.has_follow = true;
          });
      }
    },
    handleClickLike() {
      this.$axios.get("/post_like/" + this.$route.query.id).then((res) => {
        if (res.data.message == "点赞成功") {
          this.postData.like_length++;
          this.postData.has_like = true;
        } else {
          this.postData.like_length--;
          this.postData.has_like = false;
        }
      });
    },
    setPadding() {
      this.$refs.detailDom.style.paddingBottom = (84 / 360) * 100 + "vw";
    },
  },
};
</script>

<style scoped lang="less">
.news-detail {
  padding-bottom: 52/360 * 100vw;
  .normalPost {
    padding: 0 20/360 * 100vw;
    .header {
      display: flex;
      align-items: center;
      .icons {
        flex: 1;
        display: flex;
        align-items: center;
        .iconnew {
          font-size: 54/360 * 100vw;
          padding-left: 10/360 * 100vw;
          color: #d81e06;
        }
      }
    }
    .title {
      font-size: 16/360 * 100vw;
      font-weight: 700;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
      padding: 10/360 * 100vw 0;
      .create-time {
        font-size: 12/360 * 100vw;
        vertical-align: bottom;
      }
    }

    /deep/ .content {
      img {
        max-width: 100%;
      }
      p {
        text-indent: 20/360 * 100vw;
        img {
          margin-left: -20/360 * 100vw;
        }
      }
    }
  }
  .videoPost {
    video {
      width: 100%;
    }
    .info {
      padding: 10/360 * 100vw 20/360 * 100vw;
      display: flex;
      align-items: center;
      .avatar {
        width: 26/360 * 100vw;
        height: 26/360 * 100vw;
        border-radius: 50%;
      }
      .name {
        font-size: 14/360 * 100vw;
        color: #888;
        padding-left: 10/360 * 100vw;
        flex: 1;
      }
    }
    .title {
      padding: 0 20/360 * 100vw;
      font-size: 16/360 * 100vw;
      color: #333;
      font-weight: 700;
    }
  }
  .comment-list {
    border-top: 4px solid #e4e4e4;
    h2 {
      text-align: center;
      padding: 24/360 * 100vw 0;
      font-size: 18/360 * 100vw;
      color: #333;
      font-weight: 400;
    }
  }
  .btnFollow {
    font-size: 14/360 * 100vw;
    border: 1px solid #888;
    color: #333;
    line-height: 26/360 * 100vw;
    padding: 0 16/360 * 100vw;
    border-radius: 14/360 * 100vw;
    &.unfollow {
      background-color: #f00;
      color: #fff;
      border-color: red;
    }
  }

  .btns {
    display: flex;
    justify-content: space-around;
    padding: 26/360 * 100vw;
    .btn {
      border: 1px solid #888;
      font-size: 14/360 * 100vw;
      color: #333;
      line-height: 30/360 * 100vw;
      border-radius: 16/360 * 100vw;
      padding: 0 16/360 * 100vw;
    }
    .iconweixin {
      color: #01c801;
    }
    .haslike {
      color: red;
    }
  }
  .comment-btn {
    text-align: center;
    /deep/ .more-comment {
      margin: 10px auto;
      font-size: 16/360 * 100vw;
      padding: 0 50/360 * 100vw;
    }
  }
  .noMore {
    text-align: center;
    color: #888;
    font-size: 14/360 * 100vw;
    margin: 10/360 * 100vw;
  }
}
</style>
